<template>
  <div class="teacher-management-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-background"></div>
      <div class="header-content">
        <div class="header-left">
          <div class="header-icon">
            <el-icon size="32"><UserFilled /></el-icon>
          </div>
          <div class="header-text">
            <h1>教师账号管理</h1>
            <p>管理系统中的教师账号、权限分配和课程关联</p>
          </div>
        </div>
        <div class="header-actions">
          <el-button type="primary" size="large" @click="showAddTeacher = true" class="action-btn primary-btn">
            <el-icon><Plus /></el-icon>
            添加教师
          </el-button>
          <el-button type="success" size="large" @click="showBatchAdd = true" class="action-btn success-btn">
            <el-icon><Upload /></el-icon>
            批量添加
          </el-button>
        </div>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-section">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon teachers-icon">
              <el-icon size="24"><UserFilled /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ teachers.length }}</div>
              <div class="stat-label">总教师数</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon active-icon">
              <el-icon size="24"><Check /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ activeTeachersCount }}</div>
              <div class="stat-label">活跃教师</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon courses-icon">
              <el-icon size="24"><Reading /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ availableCourses.length }}</div>
              <div class="stat-label">可用课程</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon permissions-icon">
              <el-icon size="24"><Key /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ totalPermissions }}</div>
              <div class="stat-label">权限分配</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 教师列表 -->
    <el-card class="teachers-list-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <div class="header-left">
            <el-icon size="20" class="header-icon"><List /></el-icon>
            <span class="header-title">教师列表</span>
            <el-tag type="info" size="small">{{ teachers.length }} 位教师</el-tag>
          </div>
          <div class="header-right">
            <el-input
              v-model="searchQuery"
              placeholder="搜索教师姓名或用户名"
              class="search-input"
              clearable
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
            <el-button type="primary" text @click="loadTeachers" class="refresh-btn">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </div>
        </div>
      </template>

      <el-table 
        :data="filteredTeachers" 
        v-loading="loading" 
        style="width: 100%"
        class="teachers-table"
        :header-cell-style="{ background: '#f8f9fa', color: '#606266' }"
        stripe
      >
        <el-table-column prop="id" label="ID" width="80" align="center">
          <template #default="{ row }">
            <el-tag size="small" type="info">#{{ row.id }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="140">
          <template #default="{ row }">
            <div class="user-info">
              <div class="avatar-placeholder">
                <el-icon><User /></el-icon>
              </div>
              <span class="username">{{ row.username }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
          <template #default="{ row }">
            <span class="teacher-name">{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="email" label="邮箱" min-width="200">
          <template #default="{ row }">
            <div class="email-cell">
              <el-icon size="16" class="email-icon"><Message /></el-icon>
              <span>{{ row.email }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag 
              :type="row.status === 'active' ? 'success' : 'danger'"
              size="small"
              class="status-tag"
            >
              <el-icon v-if="row.status === 'active'"><Check /></el-icon>
              <el-icon v-else><Close /></el-icon>
              {{ row.status === 'active' ? '活跃' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="course_permissions" label="课程权限" min-width="200">
          <template #default="{ row }">
            <div class="course-permissions">
              <el-tag 
                v-for="course in row.course_permissions" 
                :key="course.id"
                size="small"
                type="primary"
                effect="light"
                class="course-tag"
              >
                {{ course.name }}
              </el-tag>
              <el-tag 
                v-if="row.course_permissions.length === 0"
                size="small"
                type="info"
                effect="plain"
              >
                无权限
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" width="180">
          <template #default="{ row }">
            <div class="date-cell">
              <el-icon size="16" class="date-icon"><Calendar /></el-icon>
              <span>{{ formatDate(row.created_at) }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280" align="center" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button size="small" type="primary" text @click="editTeacher(row)" class="action-btn">
                <el-icon><Edit /></el-icon>
                编辑
              </el-button>
              <el-button size="small" type="warning" text @click="managePermissions(row)" class="action-btn">
                <el-icon><Setting /></el-icon>
                权限
              </el-button>
              <el-button size="small" type="danger" text @click="deleteTeacher(row)" class="action-btn">
                <el-icon><Delete /></el-icon>
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div v-if="filteredTeachers.length === 0 && !loading" class="empty-state">
        <el-empty description="暂无教师数据" :image-size="120">
          <el-button type="primary" @click="showAddTeacher = true">添加第一个教师</el-button>
        </el-empty>
      </div>
    </el-card>

    <!-- 添加教师对话框 -->
    <el-dialog 
      v-model="showAddTeacher" 
      title="添加教师账号" 
      width="600px"
      class="teacher-dialog"
      :close-on-click-modal="false"
    >
      <div class="dialog-header">
        <el-icon size="24" class="dialog-icon"><Plus /></el-icon>
        <span>创建新的教师账号</span>
      </div>
      
      <el-form :model="teacherForm" :rules="teacherRules" ref="teacherFormRef" label-width="100px" class="teacher-form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="用户名" prop="username">
              <el-input 
                v-model="teacherForm.username" 
                placeholder="请输入用户名"
                size="large"
                class="form-input"
              >
                <template #prefix>
                  <el-icon><User /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input 
                v-model="teacherForm.name" 
                placeholder="请输入姓名"
                size="large"
                class="form-input"
              >
                <template #prefix>
                  <el-icon><UserFilled /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input 
                v-model="teacherForm.email" 
                placeholder="请输入邮箱"
                size="large"
                class="form-input"
              >
                <template #prefix>
                  <el-icon><Message /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" prop="password">
              <el-input 
                v-model="teacherForm.password" 
                type="password" 
                placeholder="请输入密码" 
                show-password
                size="large"
                class="form-input"
              >
                <template #prefix>
                  <el-icon><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="课程权限" prop="courseIds">
          <el-select
            v-model="teacherForm.courseIds"
            multiple
            placeholder="请选择课程权限"
            style="width: 100%"
            size="large"
            class="form-select"
          >
            <el-option
              v-for="course in availableCourses"
              :key="course.id"
              :label="course.name"
              :value="course.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showAddTeacher = false" size="large">取消</el-button>
          <el-button type="primary" @click="addTeacher" :loading="saving" size="large" class="submit-btn">
            <el-icon v-if="!saving"><Check /></el-icon>
            {{ saving ? '添加中...' : '添加教师' }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 批量添加对话框 -->
    <el-dialog 
      v-model="showBatchAdd" 
      title="批量添加教师" 
      width="900px"
      class="batch-dialog"
      :close-on-click-modal="false"
    >
      <div class="dialog-header">
        <el-icon size="24" class="dialog-icon"><Upload /></el-icon>
        <span>批量创建教师账号</span>
      </div>
      
      <div class="batch-add-content">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="batch-input-section">
              <h4>批量输入教师信息</h4>
              <p class="help-text">每行一个教师，格式：用户名,姓名,邮箱,密码</p>
              <el-input
                v-model="batchInput"
                type="textarea"
                :rows="12"
                placeholder="例如：
teacher001,张老师,zhang@example.com,123456
teacher002,李老师,li@example.com,123456
teacher003,王老师,wang@example.com,123456"
                class="batch-textarea"
              />
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="batch-preview-section">
              <h4>预览 ({{ batchPreview.length }}个)</h4>
              <div class="preview-table-container">
                <el-table :data="batchPreview" style="width: 100%" size="small" class="preview-table">
                  <el-table-column prop="username" label="用户名" />
                  <el-table-column prop="name" label="姓名" />
                  <el-table-column prop="email" label="邮箱" />
                  <el-table-column prop="password" label="密码" />
                </el-table>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showBatchAdd = false" size="large">取消</el-button>
          <el-button 
            type="primary" 
            @click="batchAddTeachers" 
            :loading="saving" 
            :disabled="batchPreview.length === 0" 
            size="large"
            class="submit-btn"
          >
            <el-icon v-if="!saving"><Upload /></el-icon>
            {{ saving ? '添加中...' : `批量添加 (${batchPreview.length}个)` }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 权限管理对话框 -->
    <el-dialog 
      v-model="showPermissionDialog" 
      title="课程权限管理" 
      width="700px"
      class="permission-dialog"
      :close-on-click-modal="false"
    >
      <div v-if="currentTeacher" class="permission-content">
        <div class="teacher-info">
          <div class="teacher-avatar">
            <el-icon size="32"><UserFilled /></el-icon>
          </div>
          <div class="teacher-details">
            <h3>{{ currentTeacher.name }}</h3>
            <p class="teacher-username">@{{ currentTeacher.username }}</p>
          </div>
        </div>
        
        <el-divider />
        
        <el-form :model="permissionForm" label-width="100px" class="permission-form">
          <el-form-item label="课程权限">
            <el-select
              v-model="permissionForm.courseIds"
              multiple
              placeholder="请选择课程权限"
              style="width: 100%"
              size="large"
              class="form-select"
            >
              <el-option
                v-for="course in availableCourses"
                :key="course.id"
                :label="course.name"
                :value="course.id"
              />
            </el-select>
            <div class="permission-help">
              <el-icon size="16"><InfoFilled /></el-icon>
              <span>选择教师可以管理的课程，未选择的课程将无法访问</span>
            </div>
          </el-form-item>
        </el-form>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showPermissionDialog = false" size="large">取消</el-button>
          <el-button type="primary" @click="updatePermissions" :loading="saving" size="large" class="submit-btn">
            <el-icon v-if="!saving"><Check /></el-icon>
            {{ saving ? '保存中...' : '保存权限' }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Plus, 
  Refresh, 
  Upload, 
  UserFilled, 
  User, 
  Message, 
  Calendar, 
  Edit, 
  Setting, 
  Delete, 
  Check, 
  Close, 
  Reading, 
  Key, 
  List, 
  Search, 
  Lock, 
  InfoFilled 
} from '@element-plus/icons-vue'
import { useAuthStore } from '@/stores/auth'
import { teachersApi } from '@/api/teachers'
import type { FormInstance, FormRules } from 'element-plus'

const authStore = useAuthStore()
const router = useRouter()

// 数据
const teachers = ref<any[]>([])
const availableCourses = ref<any[]>([])
const loading = ref(false)
const saving = ref(false)
const searchQuery = ref('')

// 对话框状态
const showAddTeacher = ref(false)
const showBatchAdd = ref(false)
const showPermissionDialog = ref(false)

// 当前操作的教师
const currentTeacher = ref<any>(null)

// 添加教师表单
const teacherFormRef = ref<FormInstance>()
const teacherForm = reactive({
  username: '',
  name: '',
  email: '',
  password: 'teacher123',
  courseIds: []
})

const teacherRules: FormRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在3到20个字符', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
  ]
}

// 权限管理表单
const permissionForm = reactive({
  courseIds: []
})

// 批量添加
const batchInput = ref('')
const batchPreview = computed(() => {
  if (!batchInput.value.trim()) return []
  
  const lines = batchInput.value.trim().split('\n')
  return lines.map((line, index) => {
    const parts = line.split(',').map(part => part.trim())
    return {
      username: parts[0] || '',
      name: parts[1] || '',
      email: parts[2] || '',
      password: parts[3] || 'teacher123'
    }
  }).filter(item => item.username && item.name)
})

// 计算属性
const filteredTeachers = computed(() => {
  if (!searchQuery.value) return teachers.value
  
  const query = searchQuery.value.toLowerCase()
  return teachers.value.filter(teacher => 
    teacher.name.toLowerCase().includes(query) ||
    teacher.username.toLowerCase().includes(query) ||
    teacher.email.toLowerCase().includes(query)
  )
})

const activeTeachersCount = computed(() => {
  return teachers.value.filter(teacher => teacher.status === 'active').length
})

const totalPermissions = computed(() => {
  return teachers.value.reduce((total, teacher) => {
    return total + (teacher.course_permissions?.length || 0)
  }, 0)
})

// 加载教师列表
const loadTeachers = async () => {
  loading.value = true
  try {
    const response = await teachersApi.getTeachers()
    teachers.value = response
  } catch (error: any) {
    console.error('加载教师列表失败:', error)
    if (error.response?.status === 401) {
      ElMessage.error('认证失败，请重新登录')
      router.push('/login')
    } else if (error.response?.status === 403) {
      ElMessage.error('权限不足，无法访问教师管理')
      router.push('/')
    } else {
      ElMessage.error(error.response?.data?.message || '加载教师列表失败')
    }
  } finally {
    loading.value = false
  }
}

// 加载可用课程
const loadAvailableCourses = async () => {
  try {
    // 这里应该调用API获取课程列表
    // 暂时使用模拟数据
    availableCourses.value = [
      { id: 1, name: 'Python编程' },
      { id: 2, name: '数据结构' },
      { id: 3, name: '算法设计' },
      { id: 4, name: '数据库原理' },
      { id: 5, name: '计算机网络' }
    ]
  } catch (error: any) {
    ElMessage.error('加载课程列表失败')
  }
}

// 添加教师
const addTeacher = async () => {
  if (!teacherFormRef.value) return
  
  try {
    await teacherFormRef.value.validate()
    saving.value = true
    
    await teachersApi.addTeacher({
      username: teacherForm.username,
      password: teacherForm.password,
      name: teacherForm.name,
      email: teacherForm.email,
      courseIds: teacherForm.courseIds
    })
    
    ElMessage.success('教师账号添加成功')
    showAddTeacher.value = false
    loadTeachers()
    
    // 清空表单
    teacherForm.username = ''
    teacherForm.name = ''
    teacherForm.email = ''
    teacherForm.password = 'teacher123'
    teacherForm.courseIds = []
  } catch (error: any) {
    ElMessage.error(error.response?.data?.message || '添加失败')
  } finally {
    saving.value = false
  }
}

// 批量添加教师
const batchAddTeachers = async () => {
  if (batchPreview.value.length === 0) {
    ElMessage.warning('请先输入教师信息')
    return
  }
  
  try {
    saving.value = true
    
    const response = await teachersApi.batchAddTeachers({
      teachers: batchPreview.value
    })
    
    ElMessage.success(`批量添加完成，成功${response.success_count}个，失败${response.failed_count}个`)
    
    if (response.failed_count > 0) {
      console.log('添加失败的教师:', response.failed_teachers)
    }
    
    showBatchAdd.value = false
    batchInput.value = ''
    loadTeachers()
  } catch (error: any) {
    ElMessage.error(error.response?.data?.message || '批量添加失败')
  } finally {
    saving.value = false
  }
}

// 编辑教师
const editTeacher = (teacher: any) => {
  ElMessage.info(`编辑教师: ${teacher.name}`)
}

// 管理权限
const managePermissions = (teacher: any) => {
  currentTeacher.value = teacher
  permissionForm.courseIds = teacher.course_permissions.map((course: any) => course.id)
  showPermissionDialog.value = true
}

// 更新权限
const updatePermissions = async () => {
  if (!currentTeacher.value) return
  
  try {
    saving.value = true
    
    await teachersApi.updateTeacherPermissions(currentTeacher.value.id, {
      courseIds: permissionForm.courseIds
    })
    
    ElMessage.success('权限更新成功')
    showPermissionDialog.value = false
    loadTeachers()
  } catch (error: any) {
    ElMessage.error('权限更新失败')
  } finally {
    saving.value = false
  }
}

// 删除教师
const deleteTeacher = async (teacher: any) => {
  try {
    await ElMessageBox.confirm(`确定要删除教师 ${teacher.name} 吗？`, '确认删除', {
      type: 'warning'
    })
    
    await teachersApi.deleteTeacher(teacher.id)
    ElMessage.success('删除成功')
    loadTeachers()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败')
    }
  }
}

// 格式化日期
const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleString('zh-CN')
}

onMounted(() => {
  // 检查用户权限
  if (!authStore.user || authStore.user.role !== 'admin') {
    ElMessage.error('您没有权限访问此页面')
    router.push('/')
    return
  }
  
  loadTeachers()
  loadAvailableCourses()
})
</script>

<style scoped>
.teacher-management-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 0;
}

/* 页面头部 */
.page-header {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 40px 30px;
  margin-bottom: 30px;
  overflow: hidden;
}

.header-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
}

.header-content {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-icon {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  padding: 15px;
  backdrop-filter: blur(10px);
}

.header-text h1 {
  margin: 0 0 8px 0;
  font-size: 32px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-text p {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}

.header-actions {
  display: flex;
  gap: 15px;
}

.action-btn {
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.primary-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.success-btn {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  border: none;
}

/* 统计卡片 */
.stats-section {
  padding: 0 30px 30px;
  max-width: 1400px;
  margin: 0 auto;
}

.stat-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

.teachers-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.active-icon {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.courses-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.permissions-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: 700;
  color: #303133;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

/* 教师列表卡片 */
.teachers-list-card {
  margin: 0 30px 30px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 16px;
  border: none;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-icon {
  color: #409eff;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.search-input {
  width: 300px;
}

.search-input :deep(.el-input__wrapper) {
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.refresh-btn {
  border-radius: 20px;
  padding: 8px 16px;
}

/* 表格样式 */
.teachers-table {
  border-radius: 8px;
  overflow: hidden;
}

.teachers-table :deep(.el-table__header) {
  background: #f8f9fa;
}

.teachers-table :deep(.el-table__row:hover) {
  background: #f0f9ff !important;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
}

.username {
  font-weight: 500;
  color: #303133;
}

.teacher-name {
  font-weight: 600;
  color: #303133;
}

.email-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.email-icon {
  color: #909399;
}

.date-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-icon {
  color: #909399;
}

.status-tag {
  border-radius: 20px;
  padding: 4px 12px;
}

.course-permissions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.course-tag {
  border-radius: 12px;
  padding: 4px 8px;
}

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.action-btn {
  border-radius: 20px;
  padding: 6px 12px;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 0;
}

/* 对话框样式 */
.teacher-dialog,
.batch-dialog,
.permission-dialog {
  border-radius: 16px;
}

.teacher-dialog :deep(.el-dialog__header),
.batch-dialog :deep(.el-dialog__header),
.permission-dialog :deep(.el-dialog__header) {
  border-bottom: 1px solid #ebeef5;
  padding: 20px 24px;
}

.teacher-dialog :deep(.el-dialog__body),
.batch-dialog :deep(.el-dialog__body),
.permission-dialog :deep(.el-dialog__body) {
  padding: 24px;
}

.teacher-dialog :deep(.el-dialog__footer),
.batch-dialog :deep(.el-dialog__footer),
.permission-dialog :deep(.el-dialog__footer) {
  border-top: 1px solid #ebeef5;
  padding: 20px 24px;
}

.dialog-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
}

.dialog-icon {
  color: #409eff;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.submit-btn {
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
}

/* 表单样式 */
.teacher-form {
  margin-top: 20px;
}

.form-input :deep(.el-input__wrapper),
.form-select :deep(.el-input__wrapper) {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-input :deep(.el-input__wrapper):hover,
.form-select :deep(.el-input__wrapper):hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 批量添加样式 */
.batch-add-content {
  max-height: 600px;
  overflow-y: auto;
}

.batch-input-section h4,
.batch-preview-section h4 {
  margin-bottom: 12px;
  color: #303133;
  font-weight: 600;
}

.help-text {
  margin-bottom: 16px;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}

.batch-textarea :deep(.el-textarea__inner) {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.preview-table-container {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #ebeef5;
  border-radius: 8px;
}

.preview-table {
  border: none;
}

/* 权限管理样式 */
.permission-content {
  padding: 20px 0;
}

.teacher-info {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.teacher-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.teacher-details h3 {
  margin: 0 0 4px 0;
  font-size: 20px;
  color: #303133;
}

.teacher-username {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.permission-form {
  margin-top: 20px;
}

.permission-help {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: #909399;
  font-size: 13px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .stats-section .el-col {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .page-header {
    padding: 30px 20px;
  }
  
  .header-content {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .header-text h1 {
    font-size: 24px;
  }
  
  .stats-section,
  .teachers-list-card {
    margin: 0 20px 20px;
  }
  
  .search-input {
    width: 200px;
  }
  
  .header-right {
    flex-direction: column;
    gap: 10px;
  }
}
</style>
